<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Configure DeskHog</title>
    <link rel="stylesheet" href="portal.css">
    <script src="portal.js"></script>
</head>
<body>
    <div class="header">
        <h1 id="page-title">Configure your DeskHog</h1>
    </div>
    
    <!-- Configuration Screen -->
    <div id="config-screen">
        <div id="global-action-status" class="status-message" style="display:none; margin-bottom: 1em; padding: 0.75em; border-radius: 4px; text-align: center;"></div>
        <h2>WiFi</h2>
        <div class="config-section">
            
            <form id="wifi-form" onsubmit="return saveWifiConfig()">
                <div class="form-group">
                    <select name="ssid" id="ssid" required>
                        <option value="">Select a network</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password">
                </div>

                <p class="tip">If your network doesn't need a password, you can leave this blank.</p>
                
                <div class="button-container">
                    <button type="submit">Save WiFi</button>
                </div>
            </form>
            
            <div class="button-container">
                <button type="button" id="refresh-networks-btn">Refresh network list</button>
            </div>
        </div>

        <h2>Welcome to DeskHog</h2>
        <div class="config-section">
            <p>DeskHog is a tiny platform for having fun with code, hardware and the internet. Check out the <a href="https://github.com/posthog/deskhog/blob/main/README.md" target="_blank">readme</a> to get hacking, especially the <a href="https://github.com/posthog/deskhog/blob/main/tech-details.md" target="_blank">tech details file</a>.</p>
        </div>

        <h2>PostHog API configuration</h2>

        <div class="config-section">
            <form id="device-form" onsubmit="return saveDeviceConfig()">
                <div class="form-group">
                    <label for="region">Region</label>
                    <select name="region" id="region" required>
                        <option value="">Select a region</option>
                        <option value="us">US</option>
                        <option value="eu">EU</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="teamId">Team ID</label>
                    <input type="text" name="teamId" id="teamId" min="-1" required>
                    <p class="tip">This is the numeral that appears at the end of the URL when you're looking at your <a href="https://app.posthog.com/" target="_blank">project's homepage dashboard</a>.</p>
                </div>
                
                <div class="form-group">
                    <label for="apiKey">API key</label>
                    <input type="text" name="apiKey" id="apiKey">
                    <p class="tip">Create a <a href="https://app.posthog.com/settings/user-api-keys" target="_blank">new API key in your project settings</a>. Give it read access to insights.</p>
                </div>
                
                <div class="button-container">
                    <button type="submit">Save API configuration</button>
                </div>
            </form>
        </div>

        <h2>Add cards</h2>

        <div class="config-section">
            <div id="available-cards-list">
                <!-- Will be populated by JavaScript -->
                <p>Loading available card types...</p>
            </div>
        </div>

        <h2>Manage cards</h2>
        <div class="config-section">
            <div id="cards-list">
                <!-- Will be populated by JavaScript -->
                <p>Loading cards...</p>
            </div>
        </div>

        <!-- Firmware Update Section -->
        <h2>Firmware update</h2>
        <div class="config-section" id="firmware-update-section">
            <p>Current version: <span id="current-version">Checking...</span></p>
            <p id="available-version-container">Available version: <span id="available-version">N/A</span></p>
            <div class="button-container">
                <button type="button" id="check-update-btn">Check for updates</button>
            </div>
            <div id="update-available-section" style="display:none;">
                <h4>Update details:</h4>
                <pre id="release-notes" class="release-notes-box"></pre>
                <div class="button-container">
                    <button type="button" id="install-update-btn">Install update</button>
                </div>
            </div>
            <div id="update-status-container" style="margin-top: 15px;">
                <p id="update-status-text"></p>
                <div class="progress" id="update-progress-container" style="display:none;">
                    <div id="update-progress-bar" class="progress-bar" style="width: 0%;"></div>
                </div>
                <p id="update-error-message" class="error-message"></p>
            </div>
        </div>
        <!-- End Firmware Update Section -->

    </div>
    
    <footer>People who are really serious about software should make their own hardware. - Alan Kay</footer>

</body>
</html>